{% block sw_cms_element_image_gallery_config %}
<div class="sw-cms-el-config-image-gallery">
    {% block sw_cms_element_image_gallery_config_tabs %}
    <sw-tabs
        position-identifier="sw-cms-element-config-image-gallery"
        class="sw-cms-el-config-image-gallery__tabs"
        default-item="content"
    >
        <template #default="{ active }">
            {% block sw_cms_element_image_gallery_config_tab_content %}
            <sw-tabs-item
                :title="$tc('sw-cms.elements.general.config.tab.content')"
                name="content"
                :active-tab="active"
            >
                {{ $tc('sw-cms.elements.general.config.tab.content') }}
            </sw-tabs-item>
            {% endblock %}
            {% block sw_cms_element_image_gallery_config_tab_options %}
            <sw-tabs-item
                :title="$tc('sw-cms.elements.general.config.tab.settings')"
                name="settings"
                :active-tab="active"
            >
                {{ $tc('sw-cms.elements.general.config.tab.settings') }}
            </sw-tabs-item>
            {% endblock %}
        </template>

        <template
            #content="{ active }"
        >
            {% block sw_cms_element_image_gallery_config_content %}
            <sw-container
                v-if="active === 'content'"
                class="sw-cms-el-config-image-gallery__tab-content"
            >

                {% block sw_cms_element_image_gallery_config_media_selection %}
                <sw-cms-mapping-field
                    v-model:config="element.config.sliderItems"
                    entity="product_media"
                    value-types="entity"
                    :label="$tc('sw-cms.elements.imageGallery.label')"
                >

                    {% block sw_cms_element_image_gallery_config_media_list_selection %}
                    <sw-media-list-selection-v2
                        :entity-media-items="mediaItems"
                        :entity="entity"
                        :upload-tag="uploadTag"
                        :default-folder="defaultFolderName"
                        @upload-finish="onImageUpload"
                        @item-remove="onItemRemove"
                        @open-sidebar="onOpenMediaModal"
                        @item-sort="onItemSort"
                    />
                    {% endblock %}

                    {% block sw_cms_element_image_gallery_config_media_mapping_preview %}
                    <template #preview="{ demoValue }">

                        {% block sw_cms_element_image_gallery_config_media_preview_list %}
                        <div
                            v-if="demoValue && demoValue.length"
                            ref="demoMediaGrid"
                            class="sw-cms-el-config-image-gallery__mapping-preview"
                            :style="gridAutoRows"
                        >

                            {% block sw_cms_element_image_gallery_config_media_preview_item %}
                            <div
                                v-for="demo in demoValue"
                                :key="demo.id"
                                class="sw-cms-el-config-image-gallery__preview-image"
                            >
                                <img
                                    :src="demo.media.url"
                                    alt=""
                                >
                            </div>
                            {% endblock %}
                        </div>
                        {% endblock %}

                        {% block sw_cms_element_image_gallery_config_media_preview_info %}
                        <mt-banner
                            v-else
                            class="sw-cms-el-config-image__preview-info"
                            variant="info"
                        >
                            {{ $tc('sw-cms.detail.label.mappingEmptyPreview') }}
                        </mt-banner>
                        {% endblock %}
                    </template>
                    {% endblock %}
                </sw-cms-mapping-field>
                {% endblock %}

                {% block sw_cms_element_image_gallery_config_media_modal %}
                <sw-media-modal-v2
                    v-if="mediaModalIsOpen"
                    variant="full"
                    :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
                    :entity-context="cmsPageState.entityName"
                    :initial-folder-id="cmsPageState.defaultMediaFolderId"
                    @media-upload-remove-image="onItemRemove"
                    @media-modal-selection-change="onMediaSelectionChange"
                    @modal-close="onCloseMediaModal"
                />
                {% endblock %}
            </sw-container>
            {% endblock %}

            {% block sw_cms_element_image_gallery_config_settings %}
            <sw-container
                v-if="active === 'settings'"
                class="sw-cms-el-config-image-gallery__tab-settings"
            >
                <div class="sw-cms-el-config-image-gallery__settings-options">

                    {% block sw_cms_element_image_gallery_config_settings_display_mode %}
                    <div class="sw-cms-el-config-image-gallery__setting-option">

                        {% block sw_cms_element_image_gallery_config_settings_display_mode_select %}
                        <mt-select
                            v-model="element.config.displayMode.value"
                            class="sw-cms-el-config-image-gallery__setting-display-mode"
                            :label="$tc('sw-cms.elements.general.config.label.displayMode')"
                            :help-text="$tc('sw-cms.elements.imageGallery.config.helpText.displayMode')"
                            :options="displayModeValueOptions"
                            @update:model-value="onChangeDisplayMode"
                        />
                        {% endblock %}

                        {% block sw_cms_element_image_gallery_config_settings_min_height %}

                        <mt-text-field
                            v-model="element.config.minHeight.value"
                            :label="$tc('sw-cms.elements.image.config.label.minHeight')"
                            :placeholder="$tc('sw-cms.elements.image.config.placeholder.enterMinHeight')"
                            :help-text="$tc('sw-cms.elements.image.config.label.minHeightHelpText')"
                            :disabled="!['cover', 'contain'].includes(element.config.displayMode.value)"
                            @update:model-value="onChangeMinHeight"
                        />
                        {% endblock %}

                        {% block sw_cms_element_image_gallery_config_settings_vertical_align %}
                        {# ToDo NEXT-38801 - Re-enable and fix broken vertical align #}
                        <mt-select
                            v-if="false"
                            v-model="element.config.verticalAlign.value"
                            :label="$tc('sw-cms.elements.general.config.label.verticalAlign')"
                            :placeholder="$tc('sw-cms.elements.general.config.label.verticalAlign')"
                            :disabled="['cover', 'contain'].includes(element.config.displayMode.value)"
                            :options="verticalAlignValueOptions"
                        />
                        {% endblock %}
                    </div>
                    {% endblock %}

                    {% block sw_cms_element_image_gallery_config_settings_navigation %}
                    <div class="sw-cms-el-config-image-gallery__setting-navigations sw-cms-el-config-image-gallery__setting-option">
                        <div class="sw-cms-el-config-image-gallery__settings-navigation">

                            {% block sw_cms_element_image_gallery_config_settings_navigation_arrow_position %}
                            <mt-select
                                v-model="element.config.navigationArrows.value"
                                :label="$tc('sw-cms.elements.imageSlider.config.label.navigationArrows')"
                                :options="navigationArrowsValueOptions"
                                @update:model-value="emitUpdateEl"
                            />
                            {% endblock %}
                        </div>

                        <div class="sw-cms-el-config-image-gallery__settings-navigation">

                            {% block sw_cms_element_image_gallery_config_settings_navigation_dots_position %}
                            <mt-select
                                v-model="element.config.navigationDots.value"
                                :label="$tc('sw-cms.elements.imageSlider.config.label.navigationDots')"
                                :options="navigationDotsValueOptions"
                                @update:model-value="emitUpdateEl"
                            />
                            {% endblock %}
                        </div>

                        <div class="sw-cms-el-config-image-gallery__settings-navigation">

                            {% block sw_cms_element_image_gallery_config_settings_navigation_preview_position %}
                            <mt-select
                                v-model="element.config.galleryPosition.value"
                                :label="$tc('sw-cms.elements.imageGallery.config.label.navigationPreview')"
                                :options="galleryPositionValueOptions"
                                @update:model-value="emitUpdateEl"
                            />
                            {% endblock %}
                        </div>
                    </div>
                    {% endblock %}

                    {% block sw_cms_element_image_gallery_config_settings_zoom_toggles %}
                    <div class="sw-cms-el-config-image-gallery__setting-option">

                        {% block sw_cms_element_image_gallery_config_settings_toggle_zoom %}

                        <mt-switch
                            v-model="element.config.zoom.value"
                            bordered
                            :label="$tc('sw-cms.elements.imageGallery.config.label.zoom')"
                        />
                        {% endblock %}

                        {% block sw_cms_element_image_gallery_config_settings_toggle_fullscreen %}

                        <mt-switch
                            v-model="element.config.fullScreen.value"
                            bordered
                            :label="$tc('sw-cms.elements.imageGallery.config.label.fullscreen')"
                        />
                        {% endblock %}
                    </div>
                    {% endblock %}

                    {% block sw_cms_element_image_gallery_config_settings_aspect_ratio_magnifier_over_gallery_toggles %}
                    <div class="sw-cms-el-config-image-gallery__setting-option">

                        {% block sw_cms_element_image_gallery_config_settings_toggle_keep_aspect_ratio_on_zoom %}

                        <mt-switch
                            v-model="element.config.keepAspectRatioOnZoom.value"
                            bordered
                            :label="$tc('sw-cms.elements.imageGallery.config.label.keepAspectRatioOnZoom')"
                        />
                        {% endblock %}

                        {% block sw_cms_element_image_gallery_config_settings_toggle_magnifier_over_gallery %}

                        <mt-switch
                            v-model="element.config.magnifierOverGallery.value"
                            bordered
                            :label="$tc('sw-cms.elements.imageGallery.config.label.magnifierOverGallery')"
                            :help-text="$tc('sw-cms.elements.imageGallery.config.label.magnifierOverGalleryHelpText')"
                        />
                        {% endblock %}
                    </div>
                    {% endblock %}
                </div>
            </sw-container>
            {% endblock %}
        </template>
    </sw-tabs>
    {% endblock %}
</div>
{% endblock %}
